<script setup lang="ts">
import { useColumns } from "./columns";

import { onMounted, ref, computed, watchEffect, reactive } from "vue";

// https://plus-pro-components.com/components/search.html
import "plus-pro-components/es/components/search/style/css";
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import type { PaginationProps, LoadingConfig, Align } from "@pureadmin/table";

const {
  page,
  splx,
  unit,
  spzt,
  time_range,
  splx_values,
  units_values,
  tableDataMore,
  total_num,
  getAsyncywxxtjs
} = useColumns();
const state = ref({
  page: page,
  splx: splx,
  unit: unit,
  "time-range": time_range,
  spzt: spzt
});

const currentPage = ref(1);
const pageSize = ref(20);

/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 20,
  currentPage: 1,
  total: 0,
  align: "right",
  background: true
});

withDefaults(
  defineProps<{
    height?: string;
  }>(),
  {
    height: null
  }
);

const columns = computed<PlusColumn[]>(() => [
  {
    label: "审批类型",
    prop: "splx",
    valueType: "cascader",
    options: splx_values.value,
    fieldProps: {
      placement: "bottom-start",
      appendToBody: false
    },
    fieldProps: {
      placeholder: "选择审批类型"
    }
  },
  {
    label: "单位",
    prop: "unit",
    valueType: "select",
    options: units_values.value,
    fieldProps: {
      placeholder: "选择单位"
    }
  },
  {
    label: "开始-结束时间",
    prop: "time-range",
    valueType: "date-picker",
    fieldProps: {
      type: "datetimerange",
      startPlaceholder: "请选择",
      endPlaceholder: "请选择"
    }
  },
  {
    label: "主题",
    prop: "spzt",
    tooltip: "支持模糊搜索",
    fieldProps: {
      placeholder: "审批主题模糊查询"
    }
  }
]);

// 表格中数据
const table_columns: TableColumnList = [
  {
    label: "审批类型",
    prop: "SPDL",
    width: "260",
    fixed: true
  },
  {
    label: "审批子类型",
    prop: "SPLX",
    width: "260"
  },
  {
    label: "审批主题",
    prop: "SPZHUTI"
  },
  {
    label: "单位",
    prop: "PER_DEPART",
    width: "260"
  },
  {
    label: "提报时间",
    prop: "TIME_TJ",
    width: "260"
  },
  {
    label: "查看",
    width: "240",
    fixed: "right",
    slot: "operation"
  }
];

const handleChange = (values: any) => {
  console.log(values, "change");
};
const handleSearch = async (values: any) => {
  console.log(values, "search");
  try {
    const res = await getAsyncywxxtjs({ values });
    console.log(
      "%c审批数据===>>>: ",
      "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
      res
    );
    if (res.success) {
      tableDataMore.value = res.data;
      total_num.value = res.data[0].MAXRN;
    }
  } catch (error) {
    console.error("获取审批数据失败:", error);
  }
};
const handleRest = () => {
  console.log("handleRest");
};

function handleClick(row) {
  console.log(
    "%crow===>>>: ",
    "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
    row
  );
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
// 改变页码
const handleCurrentChange = (val: number) => {
  state.value.page = val;
  getAsyncywxxtjs(state.value);
};
</script>

<template>
  <PlusSearch
    v-model="state"
    :columns="columns"
    :show-number="12"
    label-width="120"
    label-position="right"
    :row-props="{ gutter: 20 }"
    :col-props="{
      span: 12
    }"
    @change="handleChange"
    @search="handleSearch"
    @reset="handleRest"
  />
  <pure-table
    :data="
      height
        ? tableDataMore.concat(tableDataMore).concat(tableDataMore)
        : tableDataMore
    "
    :columns="table_columns"
    :height="height"
  >
    <template #operation="{ row }">
      <el-button link type="primary" size="small" @click="handleClick(row)">
        查看
      </el-button>
    </template>
  </pure-table>
  <el-pagination
    v-model:current-page="page"
    :page-size="20"
    size="large"
    :background="true"
    layout="total, prev, pager, next, jumper"
    :total="total_num"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
